<!--
  * desc：
  * author：王文军
  * date：  2021/5/28 9:04
-->
<template>
  <div class="observe" ref="observe" id="observe">
    <div class="header" :class="[visible?'green':'']">
      <span style="font-size: 30px">{{visible?'visible':'Invisible'}}</span>
    </div>
    <div class="viewport" ref="viewport">
      <div class="scroll" ref="scroll">
        <div class="box"></div>
        <div class="box"></div>
        <div class="child" ref="child"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Observe",
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    console.log(document.getElementById('app'));
    console.log(document.getElementById('Layout'));
    console.log(document.getElementById('container'));
    console.log(this.$refs.observe);
    console.log(this.$refs.viewport);
    console.log(this.$refs.scroll);
    console.log(this.$refs.child);
    this.io = new window.IntersectionObserver(this.intersectionHandler, {
      rootMargin: '0px 0px 100px 0px',
      root: document.getElementById('app'),
      threshold: 0.01,
    })
    const arr = [this.$refs.child]
    arr.forEach((item,index) => {
      this.io.observe(item)
    })
  },
  methods:{
    // 交叉情况变化处理函数
    intersectionHandler(entries) {
      console.log(entries);
      this.visible = entries[0].isIntersecting;
    },
  },
}
</script>

<style lang="less" scoped>
@import './Observe.less';
</style>
